<template>
  <div>
    <div class="nav_control">
      <span class="line"></span>
      <div @click="$router.push('/extension')">
        <span :class="appType === '277' ? 'icon_extension' : 'icon_extension_cat'"></span>
        <span>推广</span>
      </div>
      <div @click="$router.push('/withdrawal')">
        <span :class="appType === '277' ? 'icon_withdrawal' : 'icon_withdrawal_cat'"></span>
        <span>提现</span>
      </div>
    </div>
  </div>
</template>

<script>
import { appType } from '../../../assets/js/app';
  export default {
    data() {
      return {
        appType: null,
      }
    },
    created () {
      this.appType = appType();
    },
  }
</script>

<style scoped>
.nav_control {
  width: 750px;
  height: 118px;
  border-bottom: 10px solid #EDEDED;
  display: flex;
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  position: relative;
}

.line {
  position: absolute;
  top: 29px;
  left: 374px;
  width: 2px;
  height: 60px;
  background: #EFEFEF;
}

.nav_control div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon_extension {
  width: 38px;
  height: 38px;
  background: url('../../../assets/img/home/icon_extension.png') no-repeat;
  background-size: 100%;
  margin-right: 22px;
}

.icon_extension_cat {
  width: 38px;
  height: 38px;
  background: url('../../../assets/img/home/icon_extension_cat.png') no-repeat;
  background-size: 100%;
  margin-right: 22px;
}

.icon_withdrawal {
  width: 38px;
  height: 38px;
  background: url('../../../assets/img/home/icon_withdrawal.png') no-repeat;
  background-size: 100%;
  margin-right: 22px;
}

.icon_withdrawal_cat {
  width: 38px;
  height: 38px;
  background: url('../../../assets/img/home/icon_withdrawal_cat.png') no-repeat;
  background-size: 100%;
  margin-right: 22px;
}
</style>